<template>
  <el-tab-pane name="field" label="属性">
    <el-form
      v-if="selected.id"
      :model="fieldConfig"
      label-width="90px"
      label-position="left"
      size="small"
      @change="handleChange"
    >
      <el-form-item v-if="fieldConfig.name !== undefined && hideOptions('name')" label="唯一标识" prop="name">
        <el-input v-model="fieldConfig.name" :readonly="true" />
      </el-form-item>

      <el-form-item v-if="fieldConfig.label !== undefined && hideOptions('label')" label="标签名称">
        <el-input v-model="fieldConfig.label" maxlength="100" />
      </el-form-item>

      <el-form-item v-if="fieldConfig.placeholder !== undefined && hideOptions('placeholder')" label="占位提示">
        <el-input v-model="fieldConfig.placeholder" maxlength="100" />
      </el-form-item>

      <slot :hide-options="hideOptions" />

      <el-form-item v-if="fieldConfig.readonly !== undefined && hideOptions('readonly')" label="只读">
        <el-switch v-model="fieldConfig.readonly" size="default" />
      </el-form-item>
      <el-form-item v-if="fieldConfig.disabled !== undefined && hideOptions('disabled')" label="禁用">
        <el-switch v-model="fieldConfig.disabled" size="default" />
      </el-form-item>

      <el-form-item v-if="fieldConfig.clearable !== undefined && hideOptions('clearable')" label="一键清空">
        <el-tooltip effect="light" content="H5表单中不生效" placement="right">
          <el-switch v-model="fieldConfig.clearable" size="default" />
        </el-tooltip>
      </el-form-item>

      <el-form-item v-if="fieldConfig.required !== undefined && hideOptions('required')" label="必填字段">
        <el-switch v-model="fieldConfig.required" size="default" />
      </el-form-item>
      <el-form-item v-if="fieldConfig.required !== undefined && hideOptions('requiredMessage')" label="校验提示">
        <el-input v-model="fieldConfig.requiredMessage" :disabled="!fieldConfig.required" maxlength="100" />
      </el-form-item>
      <el-form-item v-if="fieldConfig.workflow !== undefined && hideOptions('workflow')" label="">
        <el-checkbox v-model="fieldConfig.workflow" label="加入审批流程条件使用" />
      </el-form-item>
    </el-form>
  </el-tab-pane>

  <slot name="base-advanced">
    <el-tab-pane name="advanced" label="高级">
      <el-form v-if="selected.id" :model="fieldConfig" label-width="90px" label-position="left" size="small">
        <slot name="advanced">
          <el-form-item label="标签位置">
            <template #label>
              <div>
                标签位置
                <el-popover
                  placement="top-start"
                  title=""
                  :width="200"
                  trigger="hover"
                  content="默认继承全局表单设置。"
                >
                  <template #reference>
                    <el-icon><QuestionFilled /></el-icon>
                  </template>
                </el-popover>
              </div>
            </template>
            <el-select v-model="fieldConfig.labelPosition" placeholder="继承">
              <el-option label="继承" value />
              <el-option label="左侧对齐" value="left" />
              <el-option label="右侧对齐" value="right" />
              <el-option label="顶部对齐" value="top" />
            </el-select>
          </el-form-item>
          <el-form-item label="输入框位置">
            <template #label>
              <div>
                输入框位置
                <el-popover
                  placement="top-start"
                  title=""
                  :width="200"
                  trigger="hover"
                  content="输入框对齐方式，仅移动端有效。"
                >
                  <template #reference>
                    <el-icon><QuestionFilled /></el-icon>
                  </template>
                </el-popover>
              </div>
            </template>
            <el-select v-model="fieldConfig.inputAlign" placeholder="继承">
              <el-option label="继承" value />
              <el-option label="左侧对齐" value="left" />
              <el-option label="居中对齐" value="center" />
              <el-option label="右侧对齐" value="right" />
            </el-select>
          </el-form-item>
        </slot>
      </el-form>
    </el-tab-pane>
  </slot>
</template>

<script setup>
import { toRefs, getCurrentInstance } from 'vue'
import propsDefinition from './props'
const props = defineProps(propsDefinition)
const { selected, fieldConfig } = toRefs(props)
const { proxy } = getCurrentInstance()

const handleChange = () => {
  if (!fieldConfig.value.name) {
    fieldConfig.value.name = props.selected.id
    proxy.$message.error('组件名称不能为空')
  }
}

/** 组件隐藏指定属性 */
const hideOptions = (opt) => {
  const _opts = selected.value.hideOptions || []
  if (_opts.includes(opt)) {
    return false
  }
  return true
}
</script>
